<template>
	<view class="picturePreview">
		<view class="picturePreview_top">
			<image src="/static/svg/return.svg" @tap="toReturn"></image>
			<text>{{imgIndex+1}}/{{list.length}}</text>
			<image src="/static/svg/delete.svg" @tap="toDele" v-if="!disabled"></image>
			<view v-if="disabled"></view>
		</view>
		<swiper class="swiper" @change='change' ref='swiper' :current='imgIndex' :skip-hidden-item-layout='true'>
			<swiper-item v-for="(item,index) in list" :key='index'>
				<image :src="item" mode="aspectFit" class="banner_img" @tap="toReturn"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type:Array,
				default:[]
			},
			index: {
				type:Number,
				default:0
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				imgIndex:this.index
			}
		},
		methods:{
			change(e){
				this.imgIndex=e.detail.current
			},
			toDele(){
				uni.showModal({
					content: '您确定要删除这张图片吗？',
					success: res=> {
					    if (res.confirm) {
							this.$emit('confirm',this.imgIndex)
							this.$nextTick(()=>{
								if(this.list.length==0){
									this.$emit('cancel')
								}else if(this.imgIndex==0){
									this.imgIndex=0
								}else{
									this.imgIndex-=1
								}
							})
					    } else if (res.cancel) {
					        
					    }
					}
				})
			},
			toReturn(){
				this.$emit('cancel')
			}
			
		}
	}
</script>

<style lang="scss">
	.picturePreview{
		position: fixed;
		height: 100%;
		width: 750rpx;
		top: 0;
		left: 0;
		z-index: 998;
		background-color: #000000;
		.picturePreview_top{
			display: flex;
			height: 88rpx;
			align-items: center;
			justify-content: space-between;
			padding: 0 36rpx;
			background-color: #FFFFFF;
			image{
				height: 44rpx;
				width: 44rpx;
				display: block;
			}
			text{
				color: #333333;
				font-size: 36rpx;
				letter-spacing: 1rpx;
				display: inline-block;
			}
		}
		.swiper{
			height: 100%;
			width: 750rpx;
			.banner_img{
				height: 100%;
				width: 750rpx;
			}
		}
	}
</style>
